<template>
  <div
    class="wsmodel3d"
    v-loading="loading"
    element-loading-text="正在加载模型..."
    ref="wsmodel3dDom"
  ></div>
</template>
<script setup>
import { onMounted, nextTick, ref } from 'vue'
//引入threejs
import * as THREE from 'three'
//引入轨道控制器（用来通过鼠标事件控制模型旋转、缩放、移动），没有这个需求可不引入
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
//引入Vue3生命周期
const wsmodel3dDom = ref(null)
const loading = ref(false)

let scene
const initThreejs = () => {
  // 初始化threejs
  // 创建场景对象Scene
  scene = new THREE.Scene()
  // 创建相机

  const dom = wsmodel3dDom.value
  const width = dom.offsetWidth
  const height = dom.offsetHeight

  let camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100)
  camera.position.x = 0
  camera.position.y = 1
  camera.position.z = 5
  camera.lookAt(0, 0, 0)
  // 添加环境光
  scene.add(new THREE.AmbientLight(0x666666)) // 环境光
  // 渲染器
  let renderer = new THREE.WebGLRenderer({
    antialias: true, // 抗锯齿
    alpha: true // 用于设置透明度
  })
  renderer.setClearColor(0xeeeeee, 0.0) //canvas画布颜色
  renderer.setSize(width, height) //canvas 画布大小
  renderer.shadowMap.enabled = true //让渲染器支持投影

  const loader = new GLTFLoader()
  loading.value = true
  loader.load(
    'src/assets/d3modle/bzbzq.gltf',
    // 'src/assets/d3modle/dp_addlight.glb',
    (gltf) => {
      // 解决模型为黑色的问题
      console.log('mkl', gltf)
      console.log(gltf.scene)
      gltf.scene.traverse(function (child) {
        if (child.isMesh) {
          console.log('child', child)
          child.frustumCulled = false
          //模型阴影
          child.castShadow = true
          child.material.emissive = child.material.color
          child.material.emissiveMap = child.material.map
        }
      })

      const _scene = gltf.scene
      const box = new THREE.Box3().setFromObject(_scene)
      const x = box.max.x - box.min.x
      const y = box.max.y - box.min.y
      const z = box.max.z - box.min.z
      const maxDim = Math.max(x, y, z)
      const scale = 5 / maxDim
      loading.value = false
      _scene.scale.set(scale, scale, scale)
      scene.add(gltf.scene)
      renderer.render(scene, camera)
    },
    function (xhr) {
      // 控制台查看加载进度xhr
      console.log(Math.floor((xhr.loaded / xhr.total) * 100))
    }
  )
  /*
  loader.load(
    'src/assets/wsgltf/温室棚测试01.gltf',
    (gltf) => {
      // 解决模型为黑色的问题
      gltf.scene.traverse(function (child) {
        if (child.isMesh) {
          child.material.emissive = child.material.color
          child.material.emissiveMap = child.material.map
        }
      })

      const _scene = gltf.scene
      const box = new THREE.Box3().setFromObject(_scene)
      const x = box.max.x - box.min.x
      const y = box.max.y - box.min.y
      const z = box.max.z - box.min.z
      const maxDim = Math.max(x, y, z)
      const scale = 5 / maxDim
      loading.value = false
      _scene.scale.set(scale, scale, scale)
      scene.add(gltf.scene)
      renderer.render(scene, camera)
    },
    function (xhr) {
      // 控制台查看加载进度xhr
      console.log(Math.floor((xhr.loaded / xhr.total) * 100))
    }
  )
  */
  dom.appendChild(renderer.domElement)
  renderer.render(scene, camera)

  let controls = new OrbitControls(camera, renderer.domElement)
  controls.addEventListener('change', () => {
    renderer.render(scene, camera)
  })
}

onMounted(() => {
  nextTick(() => {
    initThreejs()
  })
})
</script>
<style lang="scss" scoped>
.wsmodel3d {
  width: 100%;
  height: 100%;
}
</style>
